<!-- eslint-disable -->
<template>
  <div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="dialogClose" width="550px" :close-on-click-modal="false">
      <el-form :model="form" ref="form" class="dialog-form" @submit.native.prevent>
        <el-form-item label="用户" :label-width="formLabelWidth"
          prop="user_id"
          :rules="[
            { required: false, message: '请输入用户', trigger: 'blur' }
          ]">
          <el-input size="medium" type="number" v-model="form.user_id"></el-input>
        </el-form-item>
        <el-form-item label="订单编号" :label-width="formLabelWidth"
          prop="no"
          :rules="[
            { required: false, message: '请输入订单编号', trigger: 'blur' }
          ]">
          <el-input size="medium" type="text" v-model="form.no"></el-input>
        </el-form-item>
        <el-form-item label="订单总价" :label-width="formLabelWidth"
          prop="total_money"
          :rules="[
            { required: false, message: '请输入订单总价', trigger: 'blur' }
          ]">
          <el-input size="medium" type="text" v-model="form.total_money"></el-input>
        </el-form-item>
        <el-form-item label="支付时间" :label-width="formLabelWidth"
          prop="payd_at"
          :rules="[
            { required: false, message: '请选择支付时间', trigger: 'blur' }
          ]">
          <el-date-picker
            v-model="form.payd_at"
            size="medium"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择支付时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发货时间" :label-width="formLabelWidth"
          prop="send_at"
          :rules="[
            { required: false, message: '请选择发货时间', trigger: 'blur' }
          ]">
          <el-date-picker
            v-model="form.send_at"
            size="medium"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择发货时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="收货时间" :label-width="formLabelWidth"
          prop="overd_at"
          :rules="[
            { required: false, message: '请选择收货时间', trigger: 'blur' }
          ]">
          <el-date-picker
            v-model="form.overd_at"
            size="medium"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择收货时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="支付状态" :label-width="formLabelWidth"
          prop="is_pay"
          :rules="[
            { required: false, message: '请输入支付状态', trigger: 'blur' }
          ]">
          <el-input size="medium" type="text" v-model="form.is_pay"></el-input>
        </el-form-item>
        <el-form-item label="订单状态" :label-width="formLabelWidth"
          prop="status"
          :rules="[
            { required: false, message: '请选择订单状态', trigger: 'blur' }
          ]">
          <el-radio-group v-model="form.status">
            <el-radio size="medium" :label="1" border>正常</el-radio>
            <el-radio size="medium" :label="2" border>禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth"
          prop="type"
          :rules="[
            { required: false, message: '请输入类型', trigger: 'blur' }
          ]">
          <el-input size="medium" type="text" v-model="form.type"></el-input>
        </el-form-item>
        <el-form-item label="核销" :label-width="formLabelWidth"
          prop="is_write"
          :rules="[
            { required: false, message: '请输入核销', trigger: 'blur' }
          ]">
          <el-input size="medium" type="text" v-model="form.is_write"></el-input>
        </el-form-item>
        <el-form-item label="收货人姓名" :label-width="formLabelWidth"
          prop="address_name"
          :rules="[
            { required: false, message: '请输入收货人姓名', trigger: 'blur' }
          ]">
          <el-input size="medium" type="text" v-model="form.address_name"></el-input>
        </el-form-item>
        <el-form-item label="收货人电话" :label-width="formLabelWidth"
          prop="address_phone"
          :rules="[
            { required: false, message: '请输入收货人电话', trigger: 'blur' }
          ]">
          <el-input size="medium" type="text" v-model="form.address_phone"></el-input>
        </el-form-item>
        <el-form-item label="收货地址省名称" :label-width="formLabelWidth"
          prop="province_name"
          :rules="[
            { required: false, message: '请输入收货地址省名称', trigger: 'blur' }
          ]">
          <el-input size="medium" type="text" v-model="form.province_name"></el-input>
        </el-form-item>
        <el-form-item label="收货地址市名称" :label-width="formLabelWidth"
          prop="city_name"
          :rules="[
            { required: false, message: '请输入收货地址市名称', trigger: 'blur' }
          ]">
          <el-input size="medium" type="text" v-model="form.city_name"></el-input>
        </el-form-item>
        <el-form-item label="收货地址区名称" :label-width="formLabelWidth"
          prop="area_name"
          :rules="[
            { required: false, message: '请输入收货地址区名称', trigger: 'blur' }
          ]">
          <el-input size="medium" type="text" v-model="form.area_name"></el-input>
        </el-form-item>
        <el-form-item label="收货地址详细地址" :label-width="formLabelWidth"
          prop="address_detail"
          :rules="[
            { required: false, message: '请输入收货地址详细地址', trigger: 'blur' }
          ]">
          <el-input size="medium" type="text" v-model="form.address_detail"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" :label-width="formLabelWidth"
          prop="created_at"
          :rules="[
            { required: false, message: '请选择创建时间', trigger: 'blur' }
          ]">
          <el-date-picker
            v-model="form.created_at"
            size="medium"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择创建时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="medium" type="primary" @click="addData('form')" :loading="loadingAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<!-- eslint-disable -->
<script>
  import {OrdersAdd} from '@/utils/request.js'

  export default {
    components: {  },
    name: 'ordersForm',
    data(){
      return {
        dialogTitle: '新增订单',
        dialogFormVisible: false,
        formLabelWidth: '100px',
        loadingAdd: false,
        form: {
          id: 0,
          user_id: '',
          no: '',
          total_money: '',
          payd_at: '',
          send_at: '',
          overd_at: '',
          is_pay: '',
          status: '',
          type: '',
          is_write: '',
          address_name: '',
          address_phone: '',
          province_name: '',
          city_name: '',
          area_name: '',
          address_detail: '',
          created_at: '',
        },

      }
    },
    created() {

    },
    methods: {
      dialogClose() {
        this.initForm()
      },
      editTmp(row) {
        this.form = {
          id: row.id,
          user_id: row.user_id,
          no: row.no,
          total_money: row.total_money,
          payd_at: row.payd_at,
          send_at: row.send_at,
          overd_at: row.overd_at,
          is_pay: row.is_pay,
          status: row.status,
          type: row.type,
          is_write: row.is_write,
          address_name: row.address_name,
          address_phone: row.address_phone,
          province_name: row.province_name,
          city_name: row.city_name,
          area_name: row.area_name,
          address_detail: row.address_detail,
          created_at: row.created_at,
        }
        this.dialogTitle = this.form.id > 0 ? '编辑订单' : '新增订单'
        this.dialogFormVisible = true
      },
      addData(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loadingAdd = true
            OrdersAdd(this.form).then((res) => {
              if (res.code == 200) {
                this.$message.success(res.msg);
                this.$emit('refreshPage')
                this.dialogFormVisible = false
              } else {
                this.$message.error(res.msg);
              }
              this.loadingAdd = false
            })
          }
        });
      },
      initForm() {
        this.form = {
          id: 0,
          user_id: '',
          no: '',
          total_money: '',
          payd_at: '',
          send_at: '',
          overd_at: '',
          is_pay: '',
          status: '',
          type: '',
          is_write: '',
          address_name: '',
          address_phone: '',
          province_name: '',
          city_name: '',
          area_name: '',
          address_detail: '',
          created_at: '',
        }
        this.$refs['form'].resetFields()
        this.dialogTitle = '新增订单'
      },

    }
  }
</script>

<style scoped>
  >>>.el-dialog__body {
    /* padding-right: 50px !important; */
    /* max-height: 500px; */
    /* overflow-y: scroll; */
  }

  
</style>
